<template>
    <div id="app" class="detail" :class="{'in-app':isApp}">
        <div class="detail-cont">
            <div id="cont" class="cont" @click="previewImageAction($event)" :class="{'xs':range == 1,'sm':range == 2,'normal':range==3,'md':range == 4,'lg':range == 5}" v-html="content"></div>
            <div class="source-box" v-if="is_show_source">
                <p>原网页由 泛亚资讯 转码以便移动设备阅读</p>
                <a :href="source_url">查看原文</a>
            </div>
        </div><!-- detaiil-cont -->
    </div>
</template>
<script>
export default {
    name:'detail',
    data(){
        return {
            id:'',
            content:'',
            is_show_source:0,
            source_url:'',
            isApp:this.$utils.app.isApp,
            range:3,
            preview:{
                status:false,
                delete:false,
                active:0,
                list:[]
            },
        }
    },
    mounted(){
        //获取默认字体大小
        let font = this.$utils.caches.get('font');
        this.range = isNaN(parseInt(font)) ? 3: parseInt(font);

        let parse = this.$utils.urlFactory.parse(location.search);
            this.id = parse.id;
            if(parse.inject){
                window.renderView = (content)=>{
                    this.render(content).then(()=>{
                        this.$nextTick().then(()=>{
                            //一次性加载所有图片
                            let imgs = document.querySelectorAll('img[data-src]');
                            let len = imgs.length;
                            if(len ==0) return false;
                            for(let i = 0;i<len;i++){
                                let img = imgs[i];
                                let src = img.getAttribute('data-src');
                                img.setAttribute('src',src);
                            }
                        });
                    })
                }
            }else{
                this.loadPage().then(rs=>{
                    this.$nextTick().then(()=>{
                        //一次性加载所有图片
                        let imgs = document.querySelectorAll('img[data-src]');
                        let len = imgs.length;
                        if(len ==0) return false;
                        for(let i = 0;i<len;i++){
                            let img = imgs[i];
                            let src = img.getAttribute('data-src');
                            img.setAttribute('src',src);
                        }
                        
                    });
                }).catch(e=>{
                    console.log(e);
                });
            }
    },
    methods:{
        loadPage(){
            let urlParams = this.$utils.urlFactory.parse(location.search);
            let params = {
                news_id:this.id
            }

            return this.$http.get('?ct=news&ac=detail_content',{params}).then(response=>{
                let {data} = response;
                if(data.code == 0){
                    let rs = data.data;
                    this.is_show_source  = rs.is_show_source;
                    this.source_url  = rs.source_url;

                    this.render(rs.content);
                }else{
                    let co = this.$toast(data.msg);
                    if(data.code == 5003 || data.code == 5004){
                        co.then(()=>{
                            history.back();
                        })
                    }
                    throw new Error(data.msg);
                }
            }).catch(e=>{
                throw e;
            })
        },
        previewImageAction(e){
            if(e.target.tagName.toUpperCase() === 'IMG'){
                if(this.preview.list.length == 0){
                    let imgs = e.currentTarget.querySelectorAll('img');
                    for(let i = 0,len = imgs.length;i<len;i++){
                        imgs[i].dataset.idx = i;
                        let src = imgs[i].getAttribute('data-src')
                        this.preview.list.push(src);
                    }
                }
                if(this.preview.list.length>0){
                    let idx = e.target.dataset.idx;
                    location.href = this.$utils.app.link.preview + '/' + idx;
                    window.getImages = ()=>this.preview.list;
                }
            }
        },
        render(content){
            let self = this;
            this.content = content.replace(/<img([\s\S]*?)src\s*=\s*(['"])([\s\S]*?)\2([^>]*)>/gi,'<img$1data-src=$2$3$2$4 src="" lazy>')
            // this.content = content.replace(/<img([\s\S]*?)width\s*=\s*(['"])([\s\S]*?)\2([\s\S]*?)height\s*=\s*\2([\s\S]*?)\2([^>]*)>/gi,function(){
            //             let size = self.getImageSize(arguments[3],arguments[5]);
            //             return `<img${arguments[1]} width=${arguments[2]}${size.width}px${arguments[2]}${arguments[4]}height=${arguments[2]}${size.height}px${arguments[2]}${arguments[6]} >`
            //         })
            return Promise.resolve(true);
        },
        getImageSize(width,height){
            //#cont 的padding宽度
            let padding = lib.flexible.rem2px(30/75);
            //#cont 可显示内容的宽度
            let display_width = window.innerWidth - 2 * padding;
            let ratio = width / height;

            let img_width,img_height;
            if(width>display_width){
                img_width = display_width;
            }else{
                img_width = width;
            }

            img_height = img_width / ratio;
            return {
                width:img_width,
                height:img_height
            }
        },
    }    
}
</script>
<style lang="less">
.detail {
    background-color:#fff;
    color:#161a24;
    
    &.night {
        .page-bar {
            border-bottom: 0.013333rem solid #58443f;
        }
        &,.page-bar,.list-item {
            background-color:#282423;
        }
        color:#fff;

        .list-item{
             .tit {
                 color:#fff;
             }
        }
    }

    .sticky {
       .header-middle {
           opacity:1;
       } 
    }
    .header-middle {
        transition: opacity .2s;
        font-size:34px;
        color:#141414;
        opacity: 0;
    }

    .detail-cont {
        .header.wrap {
            margin-bottom:40px;
            padding:0 30px;
        }
        .tit {
            font-size:44px;
            line-height: 64px;
            font-weight: bold;
        }
        .info {
            margin-top:20px;
            font-size:24px;
            color:#919191;
            span:first-child {
                color:#a98273;
            }
            span + span {
                margin-left:12px;
            }
        }
        
        .cont {
            position:relative;
            padding:0 30px;
            line-height: 62/36;
            word-break: break-word;
            overflow: hidden;
            table{
                width:100%;
            }
            &.normal {
                font-size:36px!important;
            }
            &.xs {
                font-size:28px!important;
            }
            &.sm {
                font-size:32px!important;
            }
            &.md {
                font-size:40px!important;
            }
            &.lg {
                font-size:44px!important;
            }
            img {
                display: block;
                margin:0 auto 20px;
                width:100% !important;
                height:auto;
            }
            
            p,div,span,pre  {
                margin-bottom:20px;
                // word-wrap: break-word;
                text-align: justify;
                word-break: break-word;
                word-break: break-all;
                text-indent: 0!important;
            }
            a {
                color:#337ab7;
            }
            video,iframe,embed {
                display: block;
                max-width:100%;
                // height:auto;
                margin: auto;
            }
            video,embed {
                background-color:rgb(45,45,45)
            }
        }
    }
    .push-list,
    .comment-list {
        padding-top:58px;
        .header {
            margin-bottom:40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size:38px;
            font-weight: bold;
            line-height: 1;

            i {
                margin-top:20px;
                display: block;
                width:32px;
                height:12px;
                background-color:#a98273;
                border-radius:6px;
            }
        }
    }
    .ui-list {
        //底部栏的高度
        padding-bottom:104px;
    }

    &.in-app {
        .ui-list {
            padding-bottom:0
        }
    }

    .comment-list {
        
        .list {
            padding:0 30px;

            &>.tit {
                font-size:28px;
                color:#282828;
                font-weight: bold;
                margin-bottom:8px;
            }
        }
    }

    .font-setting {
        position: absolute;
        left:0;
        right:0;
        bottom:0;
        z-index:2;
        background-color:#fff;
        overflow: hidden;

        .option {
            padding-top:50px;
            margin-bottom:50px;
            display: flex;
            
            .item {
                flex:1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                font-size:28px;
                color:#282828;
                span {
                    margin-top:12px;
                    line-height: 1;
                }
            }
        }
        .slide {
            padding-top:32px;
            border-bottom:1px solid #efefef;
            .pick {
                position:relative;
                height:30px;
                span {
                    position: absolute;
                    top:0;
                    line-height: 30px;
                    color:#919191;
                    font-size:28px;
                    text-align: center;
                    &:first-child {
                        left:0%;
                    }
                    &:nth-of-type(2){
                        left:25%;
                        transform: translateX(-50%)
                    }
                    &:nth-of-type(3){
                        left:50%;
                        transform: translateX(-50%)
                        
                    }
                    &:nth-of-type(4){
                        left:75%;
                        transform: translateX(-50%)
                        
                    }
                    &:nth-of-type(5){
                        right:0;
                    }

                    &.on {
                        color:#e64a19;
                    }
                    
                }
            }
            .range {
                position: relative;
                height:130px;
                display: flex;
                justify-content: center;
                align-items: center;
                .line {
                    position:relative;
                    height: 4px;
                    width:100%;
                    border-radius:10px;
                    background-color:#efefef;

                    span {
                        position: absolute;
                        height:100%;
                        background: #e64a19;

                        &::after {
                            content:'';
                            position: absolute;
                            right:0;
                            width:30px;
                            height:30px;
                            border-radius:50%;
                            background-color:#e64a19;
                            transform: translate(50%,-50%);
                        }
                    }
                }
                input[type=range] {
                    position:absolute;
                    top:0;
                    left:0;
                    width:100%;
                    height:100%;
                    opacity:0;
                    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
                    width: 100%; /* Specific width is required for Firefox. */
                    // background: transparent; /* Otherwise white in Chrome */
                }


                input[type=range]:focus {
                    outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
                }

                input[type=range]::-webkit-slider-thumb {
                    -webkit-appearance: none;
                    border: none;
                    height: 30px;
                    width: 30px;
                    border-radius: 50%;
                    background: #e64a19;
                    cursor: pointer;
                    margin-top: -13px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
                }

                input[type=range]::-webkit-slider-runnable-track {
                    height: 4px;
                    background-color:#efefef;
                    border-radius: 10px; /*将轨道设为圆角的*/
                }
                input[type=range]:focus::-webkit-slider-runnable-track {
                    background: #e64a19;
                }
            }
        }
        .slide,.cancel {
            margin:0 30px;
            
        }
        .cancel {
            display: flex;
            justify-content: center;
            align-items: center;
            border-top:1px solid #efefef;
            height:100px;
            color:#919191;
            font-size:32px;
        }
    }

    .detail-end {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 106px;
        color:#c6c6c6;
        font-size:28px;
    }

    .hot-rec {
        margin:0 30px 60px;
        border:1px solid #efefef;
        border-left:3px solid #e64a19;
        height:140px;
    }

    .hot-rec,.hot-rec-tit {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .hot-rec-tit {
        flex-shrink: 0;
        flex-grow: 0;
        flex-direction: column;
        font-weight: bold;
        font-size:36px;
        line-height: 42px;
        color:#282828;
        width:138px;
        height:79px;
        border-right: 2px solid #efefef;
    }
    .hot-rec-cont {
        flex:1;
        padding:0 30px;
        font-size:32px;
        color:#282828;
        line-height: 48px;
    }
    .source-box {
        padding:60px 30px;
        text-align: center;
        font-size:28px;

        p {
            color:#999;
            margin-bottom:20px;
        }
        a {
            color:#e64a19;
        }
    }
}
</style>

